import { useLocation, Navigate } from 'react-router-dom'
import { rootRouter } from './Index'
import { store } from '@/store'
import { getMatched } from '@/utils/route'
import NProgress from '@/config/nprogress'

const AuthGuard = (props: { children: JSX.Element }) => {
  NProgress.start()

  const { pathname } = useLocation()

  if (pathname === '/') {
    NProgress.done()
    return <Navigate to="/login" replace />
  }
  // * 判断当前路由是否需要访问权限(不需要权限直接放行)

  if (!getMatched(pathname, rootRouter).some((item) => item.meta?.requiresAuth)) {
    NProgress.done()
    return props.children
  }

  // * 判断是否有Token，只在跳转的时候检查一次，所以不需要响应式直接getState获取即可不用useSelector
  const token = store.getState().global.token
  if (!token) {
    NProgress.done()
    return <Navigate to="/login" replace />
  }

  // * Dynamic Router(动态路由，根据后端返回的菜单数据生成的一维数组)
  const dynamicRouter = store.getState().global.authRouters
  // * Static Router(静态路由，必须配置首页地址，否则不能进首页获取菜单、按钮权限等数据)，获取数据的时候会loading，所有配置首页地址也没问题
  const staticRouter: string[] = []
  const routerList = dynamicRouter.concat(staticRouter)
  // * 如果访问的地址没有在路由表中重定向到403页面
  if (routerList.indexOf(pathname) === -1) {
    NProgress.done()
    return <Navigate to="/403" replace />
  }

  // * 当前账号有权限返回 Router，正常访问页面
  NProgress.done()
  return props.children
}

export default AuthGuard
